<template>
  <div class="body_bgi full p_10 relative">
    <div class="w_full h_60 relative">
      <bigscreen-header headerName="剪羊毛选手分配羊" />

      <div class="w_200 flex_row_around absolute bottom_0 right_0">
        <el-button type="success" :disabled="isLock" @click="genRandomList()" >刷新</el-button>
        <el-button type="primary" v-if="!isLock" @click="lockRandomList()">锁定</el-button>
        <el-button type="primary" v-else :disabled="isLock" @click="lockRandomList()">已锁定</el-button>
      </div>
    </div>

    <div class="w_80_p h_full-50 m_0_auto">
      <div class="w_full h_40 lh_40 flex_row_start fs_1_5vw color_fff">
        <div class="fw_bold w_100 text_center">选手编号</div>
        <div class="fw_bold w_300 text_center">选手名称</div>
        <div class="fw_bold w_200 text_center">羊1</div>
        <div class="fw_bold w_200 text_center">羊2</div>
      </div>

      <div class="w_full h_full-100 scroll_box_1 overflow_y_auto pr_10">
        <div 
          class="w_full h_60 lh_60 cursor bgc_fff border_radius_10 mb_10" 
          v-for="(item, index) in dataList" :key="index"
        >
          <div class="full flex_row_start fs_1_5vw">
            <div class="w_100 h_80 text_center font_zh">{{ item.personNumber }}</div>
            <div class="w_300 h_80 text_center fw_bold ls_2">{{ item.personName }}</div>
            <div class="w_200 h_80 text_center font_zh">{{ item.sheep1Number }}</div>
            <div class="w_200 h_80 text_center font_zh">{{ item.sheep2Number }}</div>
          </div>
        </div>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { 
    genRandomList, 
    lockRandomList, 
    getPersonSheepList, 
  } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'PersonSort',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        isLock: false,
        dataList: [],
      }
    },
    async mounted() {
      // 1. 
      this.genRandomList()

      // 2 获取 锁定 状态
    },
    methods: { 
      // 
      async genRandomList() {
        let res = await genRandomList()
        try {
          if (res.code == 1001 && res.message == '列表已经固定，无法再次生成！') {
            this.isLock = true
          }
          this.getPersonSheepList()
        } catch(err) {
          console.log('genRandom 接口报错：', err);
        }
      },

      async getPersonSheepList() {
        let res = await getPersonSheepList()
        // debugger
        try {
          if (res.code == 1000) {
            let dataList = res.data.sort((a, b) => {
              return a.personId - b.personId
            })

            this.dataList = dataList



            this.$message({
              message: '刷新成功！',
              type: 'success'
            });
          }
        } catch(err) {
          console.log('getPersonSheepList 接口报错：', err);
        }
      },

      async lockRandomList() {
        let res = await lockRandomList()
        try {
          if (res.code == 1000 && res.message == 'success') {
            this.isLock = true
            this.$message({
              message: '锁定成功！',
              type: 'success'
            });
          }
        } catch(err) {
          console.log('lockRandomList 接口报错：', err);
        }
      }
    }
  }
</script>

<style>
  
</style>